<!DOCTYPE html>
<html lang="en">
    <head>
        <title>常用指令</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" src="../libs/angular/angular.min.js"></script>
        <script type="text/javascript" src="../libs/angular/angular-sanitize.min.js"></script>
    </head>
    <body>
        <div ng-app="dkApp" >
            <fieldset>
                <legend><h3>表达式 {{}}</h3></legend>
                <div ng-init="src = '../libs/imgs/green.jpg'">
                    <span>1 + 1 = {{1 + 1}}</span>
                    <img src="{{src}}">
                </div>                
            </fieldset>
            <fieldset>
                <legend><h3>ng-bind</h3></legend>
                <div >
                    <h1 ng-bind="'1 + 1 =' + (1 + 1)">{{10 + 10}}</h1>
                </div>                 
            </fieldset>
            <fieldset>
                <legend><h3>ng-bind-html</h3></legend>
                <div ng-init="html = '<h1>AngularJS1.5</h1>'">
                    <div ng-bind-html="html"></div>
                </div>                 
            </fieldset> 
            <fieldset>
                <legend><h3>ng-model</h3></legend>
                <div >
                    <input type="text" ng-model="model">
                    <h1 ng-bind="model"></h1>
                </div>                 
            </fieldset>   
            <fieldset>
                <legend><h3>ng-bind-template</h3></legend>
                <div ng-init="myObj = {name: 'DK', age: 18}">
                    <h1 ng-bind-template="This is {{myObj.name}}, I'm {{myObj.age}} years old"></h1>
                    <h1 ng-bind="'This is' + myObj.name + ', I am ' + myObj.age + ' years old'"></h1>
                    <h1>This is {{myObj.name}}, I'm {{myObj.age}} years old</h1>
                </div>                
            </fieldset>    
            <fieldset>
                <legend><h3>ng-non-bindable</h3></legend>
                <div ng-init="myObj = {name: 'DK', age: 18}">
                    <h1>This is {{myObj.name}}, I'm {{myObj.age}} years old</h1>
                    <h1 ng-non-bindable>This is {{myObj.name}}, I'm {{myObj.age}} years old</h1>
                </div>               
            </fieldset>                              
        </div>

        <script type="text/javascript">
            var dkApp = angular.module('dkApp', ['ngSanitize']);          
        </script>
    </body>
</html>